import type { DirectiveBinding } from 'vue';
import { useLoginUserStore } from '@/index';

const button = {
  mounted(el: HTMLButtonElement, binding?: DirectiveBinding) {
    const { loginUser } = useLoginUserStore();
    if (binding) {
      switch (binding.arg) {
        case 'hasAny': {
          const auth = binding.value as string[];
          const res = auth.some(item => loginUser.permissions?.includes(item));
          if (!res) {
            el.style.display = 'none';
          }
          break;
        }

        case 'hasAll': {
          const auth = binding.value as string[];
          const res = auth.every(item => loginUser.permissions?.includes(item));
          if (!res) {
            el.style.display = 'none';
          }
          break;
        }

        case 'id': {
          if (binding.value !== loginUser.id) {
            el.style.display = 'none';
          }
          break;
        }

        case 'admin':
          if (!loginUser.permissions?.includes(binding.value)) {
            el.style.display = 'none';
          }
          break;

        default: {
          if (!loginUser.permissions?.includes(binding.value)) {
            el.style.display = 'none';
          }
        }
      }
    } else {
      if (!loginUser.permissions?.includes(el.textContent as string)) {
        el.style.display = 'none';
      }
    }
  }
};

export default button;
